import React from "react";
import { Editor, EditorState, RichUtils } from "draft-js";
import "draft-js/dist/Draft.css";

class MyEditor extends React.Component {
    constructor(props) {
      super(props);
      this.state = {editorState: EditorState.createEmpty()};
      this.onChange = (editorState) => this.setState({editorState});
      this.handleKeyCommand = this.handleKeyCommand.bind(this)
    }

    handleKeyCommand(command) {
        const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
        if (newState) {
          this.onChange(newState);
          return 'handled';
        }
        return 'not-handled';
      }

    render() {
      return (
        <div>
            <Editor 
                editorState={this.state.editorState} 
                handleKeyCommand={this.handleKeyCommand}
                onChange={this.onChange} />
                <h1>Editor</h1>
        </div>
      );
    }
}

function MyEditor2({props}){
    return(
        <MyEditor {...props}></MyEditor>
    )
}

export default MyEditor2